<template>
  <div class="main-layout">
    <div class="sidebar-container">
      <slot name="sidebar"></slot>
    </div>
    
    <div class="content-container">
      <div class="topbar-container">
        <slot name="topbar"></slot>
      </div>
      
      <main class="main-content-container" ref="mainContent">
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const mainContent = ref(null);

// 监听内容高度变化以触发滚动条
onMounted(() => {
  const observer = new ResizeObserver(entries => {
    if (mainContent.value) {
      const shouldScroll = mainContent.value.scrollHeight > mainContent.value.clientHeight;
      mainContent.value.classList.toggle('needs-scroll', shouldScroll);
    }
  });
  
  if (mainContent.value) {
    observer.observe(mainContent.value);
  }
});
</script>

<style scoped>
.main-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--v-background);
  transition:  background-color .3s;
  overflow: hidden; /* 隐藏全局滚动 */
}

.sidebar-container {
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 防止内容溢出 */
  height: 100vh;
  overflow: hidden;
}

.topbar-container {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 99;
}

.main-content-container {
  flex: 1;
  min-height: 0; /* 允许内容压缩 */
  overflow-y: auto; /* 添加滚动条 */
  padding: 25px;
}

/* 如果需要更好的滚动条效果 */
.main-content-container.needs-scroll {
  padding-right: 15px; /* 避免滚动条遮挡内容 */
}

@media (max-width: 768px) {
  .main-content-container {
    padding: 15px;
  }
}
</style>